﻿@{
    ViewBag.Title = "Home Page";
}

<div id="page-wrapper">
    <!-- BEGIN PAGE HEADING ROW -->
    <div class="row">
        <div class="col-lg-12">
            <!-- BEGIN BREADCRUMB -->
            <div class="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li><a href="#">Forms</a></li>
                    <li class="active">Form Tools</li>
                </ul>

                <div class="b-right hidden-xs">
                    <ul>
                        <li><a href="#" title=""><i class="fa fa-signal"></i></a></li>
                        <li><a href="#" title=""><i class="fa fa-comments"></i></a></li>
                        <li class="dropdown">
                            <a href="#" title="" data-toggle="dropdown"><i class="fa fa-plus"></i><span> Tasks</span></a>
                            <ul class="dropdown-menu dropdown-primary dropdown-menu-right">
                                <li><a href="#">Add new task</a></li>
                                <li><a href="#">Statement</a></li>
                                <li><a href="#">Settings</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- END BREADCRUMB -->

            <div class="page-header title">
                <!-- PAGE TITLE ROW -->
                <h1>Form Tools <span class="sub-title">included third party plugins</span></h1>
            </div>

            <!-- /#ek-layout-button -->
            <div class="qs-layout-menu">
                <div class="btn btn-gray qs-setting-btn" id="qs-setting-btn">
                    <i class="fa fa-cog bigger-150 icon-only"></i>
                </div>
                <div class="qs-setting-box" id="qs-setting-box">

                    <div class="hidden-xs hidden-sm">
                        <span class="bigger-120">Layout Options</span>

                        <div class="hr hr-dotted hr-8"></div>
                        <label>
                            <input type="checkbox" class="tc" id="fixed-navbar" />
                            <span id="#fixed-navbar" class="labels"> Fixed NavBar</span>
                        </label>
                        <label>
                            <input type="checkbox" class="tc" id="fixed-sidebar" />
                            <span id="#fixed-sidebar" class="labels"> Fixed NavBar+SideBar</span>
                        </label>
                        <label>
                            <input type="checkbox" class="tc" id="sidebar-toggle" />
                            <span id="#sidebar-toggle" class="labels"> Sidebar Toggle</span>
                        </label>
                        <label>
                            <input type="checkbox" class="tc" id="in-container" />
                            <span id="#in-container" class="labels"> Inside<strong>.container</strong></span>
                        </label>

                        <div class="space-4"></div>
                    </div>

                    <span class="bigger-120">Color Options</span>

                    <div class="hr hr-dotted hr-8"></div>

                    <label>
                        <input type="checkbox" class="tc" id="side-bar-color" />
                        <span id="#side-bar-color" class="labels"> SideBar (Light)</span>
                    </label>

                    <ul>
                        <li><button class="btn" style="background-color:#d15050;" onclick="swapStyle('/assets/css/themes/style.css')"></button></li>
                        <li><button class="btn" style="background-color:#86618f;" onclick="swapStyle('/assets/css/themes/style-1.css')"></button></li>
                        <li><button class="btn" style="background-color:#ba5d32;" onclick="swapStyle('/assets/css/themes/style-2.css')"></button></li>
                        <li><button class="btn" style="background-color:#488075;" onclick="swapStyle('/assets/css/themes/style-3.css')"></button></li>
                        <li><button class="btn" style="background-color:#4e72c2;" onclick="swapStyle('/assets/css/themes/style-4.css')"></button></li>
                    </ul>

                </div>
            </div>
            <!-- /#ek-layout-button -->

        </div><!-- /.col-lg-12 -->
    </div><!-- /.row -->
    <!-- END PAGE HEADING ROW -->
    <div class="row">
        <div class="col-lg-12">

            <!-- START YOUR CONTENT HERE -->
            <div class="portlet">
                <div class="portlet-heading dark">
                    <div class="portlet-title">
                        <h4>Dual listbox</h4>
                    </div>
                    <div class="portlet-widgets">
                        <a data-toggle="collapse" data-parent="#accordion" href="#ft-0"><i class="fa fa-chevron-down"></i></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div id="ft-0" class="panel-collapse collapse in">
                    <div class="portlet-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-top" for="duallist"> Dual listbox </label>

                                <div class="col-sm-8">
                                    <!-- #section:plugins/input.duallist -->
                                    <select multiple="multiple" size="10" name="duallistbox_demo1[]" id="duallist">
                                        <option value="option1">Option 1</option>
                                        <option value="option2">Option 2</option>
                                        <option value="option3" selected="selected">Option 3</option>
                                        <option value="option4">Option 4</option>
                                        <option value="option5">Option 5</option>
                                        <option value="option6" selected="selected">Option 6</option>
                                        <option value="option7">Option 7</option>
                                        <option value="option8">Option 8</option>
                                        <option value="option9">Option 9</option>
                                        <option value="option0">Option 10</option>
                                    </select>

                                    <!-- /section:plugins/input.duallist -->
                                    <div class="hr hr-16 hr-dotted"></div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="portlet">
                <div class="portlet-heading dark">
                    <div class="portlet-title">
                        <h4>Select2 Dropdowns</h4>
                    </div>
                    <div class="portlet-widgets">
                        <a data-toggle="collapse" data-parent="#accordion" href="#ft-1"><i class="fa fa-chevron-down"></i></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div id="ft-1" class="panel-collapse collapse in">
                    <div class="portlet-body">
                        <form class="form-horizontal" role="form" method="post">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Basic Select</label>
                                <div class="col-sm-4">
                                    <select class="form-control" id="e1">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">with icon</label>
                                <div class="col-sm-6">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                        <select class="form-control" id="e2">
                                            <option value="AL">Alabama</option>
                                            <option value="WY">Wyoming</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Disabled</label>
                                <div class="col-sm-4">
                                    <select class="form-control" id="e3" disabled>
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Multi-Value Select</label>
                                <div class="col-sm-5">
                                    <select class="form-control" id="e4" multiple>
                                        <optgroup label="Colors">
                                            <option value="RD">Red</option>
                                            <option value="OR">Orange</option>
                                            <option value="GR">green</option>
                                            <option value="BL">blue</option>
                                            <option value="YL">Yellow</option>
                                        </optgroup>
                                        <optgroup label="City">
                                            <option value="JA">Jaipur</option>
                                            <option value="DL">Delhi</option>
                                            <option value="AJ">Ajmer</option>
                                            <option value="JD">Jodhpur</option>
                                            <option value="MB">Mumbai</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Tags Support</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control input-large" id="e5">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="portlet">
                <div class="portlet-heading dark">
                    <div class="portlet-title">
                        <h4>Bootstrap Select</h4>
                    </div>
                    <div class="portlet-widgets">
                        <a data-toggle="collapse" data-parent="#accordion" href="#ft-2"><i class="fa fa-chevron-down"></i></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div id="ft-2" class="panel-collapse collapse in">
                    <div class="portlet-body">
                        <form class="form-horizontal" role="form" method="post">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Default Select</label>
                                <div class="col-sm-3">
                                    <select class="form-control selectpicker">
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Grouped</label>
                                <div class="col-sm-4">
                                    <select class="form-control selectpicker">
                                        <optgroup label="Picnic">
                                            <option>Mustard</option>
                                            <option>Ketchup</option>
                                            <option>Relish</option>
                                        </optgroup>
                                        <optgroup label="Camping">
                                            <option>Tent</option>
                                            <option>Flashlight</option>
                                            <option>Toilet Paper</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Multiple</label>
                                <div class="col-sm-3">
                                    <select class="form-control selectpicker" data-style="btn-primary" multiple>
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <select class="form-control selectpicker" multiple data-selected-text-format="count" data-style="btn-success">
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Live Search</label>
                                <div class="col-sm-5">
                                    <select class="form-control selectpicker" data-style="btn-warning" data-live-search="true">
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">With Title</label>
                                <div class="col-sm-3">
                                    <select class="form-control selectpicker show-menu-arrow" multiple title='Choose one of the following...' data-style="btn-inverse">
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select class="form-control selectpicker" data-style="btn" disabled>
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">with Icons</label>
                                <div class="col-sm-10">
                                    <select class="form-control selectpicker" data-style="btn" data-live-search="true" data-width="170px">
                                        <option data-icon="fa fa-bell-o">Mustard</option>
                                        <option data-icon="fa fa-home">Ketchup</option>
                                        <option data-icon="fa fa-heart">Relish</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="portlet">
                <div class="portlet-heading dark">
                    <div class="portlet-title">
                        <h4>Input MaxLength</h4>
                    </div>
                    <div class="portlet-widgets">
                        <a data-toggle="collapse" data-parent="#accordion" href="#ft-3"><i class="fa fa-chevron-down"></i></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div id="ft-3" class="panel-collapse collapse in">
                    <div class="portlet-body">
                        <form class="form-horizontal" role="form" method="post">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Default</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" maxlength="25">
                                    <span class="help-block">The badge will show up by default when the remaining chars are 10 or less. Maximum length is 25</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Change the threshold</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control maxL-1" maxlength="25">
                                    <span class="help-block">Do you want the badge to show up when there are 17 chars or less? Use the threshold option. <code>threshold: 17</code></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Advance</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control maxL-2" maxlength="25">
                                    <span class="help-block">This is a complete example where all the options configured for the bootstrap-maxlength counter are setted. Please note: if the <code>alwaysShow</code> option is enabled, the <code>threshold</code>option is ignored.</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Positions</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="maxL-4" maxlength="25">
                                    <span class="help-block">The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: <code>bottom-right</code>, <code>top-right</code>, <code>top-left</code>, <code>bottom-left</code> and <code>centered-right</code>. All you need to do is specify the <code>placement</code> option, with one of those strings.</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Textarea</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" id="maxL-3" maxlength="225" rows="2" placeholder="This textarea has a limit of 225 chars."></textarea>
                                    <span class="help-block">
                                        Bootstrap maxlength supports textarea as well as inputs. Even on old IE.
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="portlet">
                <div class="portlet-heading dark">
                    <div class="portlet-title">
                        <h4>Masked Input</h4>
                    </div>
                    <div class="portlet-widgets">
                        <a data-toggle="collapse" data-parent="#accordion" href="#ft-4"><i class="fa fa-chevron-down"></i></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div id="ft-4" class="panel-collapse collapse in">
                    <div class="portlet-body">
                        <form role="form" method="post">
                            <div class="row">
                                <div class="col-lg-3 col-sm-6">
                                    <div class="form-group">
                                        <label for="form-field-mask-1">Date <small class="text-success">99/99/9999</small></label>
                                        <div class="input-group">
                                            <input class="form-control input-date" id="form-field-mask-1" />
                                            <span class="input-group-btn">
                                                <button class="btn btn-primary" type="button"><i class="fa fa-calendar"></i>Go!</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <div class="form-group">
                                        <label for="form-field-mask-2">Phone <small class="text-orange"> (999) 999-9999</small></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                                            <input class="form-control input-phone" id="form-field-mask-2" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <div class="form-group">
                                        <label for="form-field-mask-3">Product Key <small class="text-success">a*-999-a999</small></label>
                                        <div class="input-group">
                                            <input class="form-control input-key" id="form-field-mask-3" />
                                            <span class="input-group-addon"><i class="fa fa-key"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <div class="form-group">
                                        <label for="form-field-mask-4">Eye Script <small class="text-primary">99/99/9999</small></label>
                                        <input class="form-control input-eyescript" id="form-field-mask-4" />
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="portlet">
                <div class="portlet-heading dark">
                    <div class="portlet-title">
                        <h4>DateTime Picker</h4>
                    </div>
                    <div class="portlet-widgets">
                        <a data-toggle="collapse" data-parent="#accordion" href="#ft-5"><i class="fa fa-chevron-down"></i></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div id="ft-5" class="panel-collapse collapse in">
                    <div class="portlet-body">
                        <form role="form" method="post">
                            <div class="row">
                                <div class="col-lg-3 col-sm-6">
                                    <div class="form-group">
                                        <label>DateTime Picking</label>
                                        <div class="input-group date form_datetime">
                                            <span class="input-group-addon">
                                                <i class="glyphicon glyphicon-time"></i>
                                            </span>
                                            <input class="form-control" />
                                        </div>
                                        <input type="hidden" id="dtp_input1" value="" /><br />
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Date Picking</label>
                                        <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                            <span class="input-group-addon">
                                                <i class="glyphicon glyphicon-calendar"></i>
                                            </span>
                                            <input class="form-control" />
                                        </div>
                                        <input type="hidden" id="dtp_input2" value="" /><br />
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Time Picking</label>
                                        <div class="input-group date form_time" data-date="" data-date-format="hh:ii p" data-link-field="dtp_input3" data-link-format="hh:ii p">
                                            <span class="input-group-addon">
                                                <i class="glyphicon glyphicon-time"></i>
                                            </span>
                                            <input class="form-control" />
                                        </div>
                                        <input type="hidden" id="dtp_input3" value="" /><br />
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Bootstrap Datepicker</label>
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="glyphicon glyphicon-calendar"></i>
                                            </span>
                                            <input class="datepicker form-control" value="02/16/12" data-date-format="mm/dd/yy" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="portlet">
                <div class="portlet-heading dark">
                    <div class="portlet-title">
                        <h4>Html Editors</h4>
                    </div>
                    <div class="portlet-widgets">
                        <a data-toggle="collapse" data-parent="#accordion" href="#ft-6"><i class="fa fa-chevron-down"></i></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div id="ft-6" class="panel-collapse collapse in">
                    <div class="portlet-body">
                        <form class="form-horizontal" role="form" method="post">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Wysihtml5:</label>
                                <div class="col-sm-9">
                                    <textarea id="editor1" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Bootstrap MarkDown:</label>
                                <div class="col-sm-9">
                                    <textarea data-provide="markdown" class="form-control" data-iconlibrary="fa"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Bootstrap Wysiwyg:</label>
                                <div class="col-sm-9">
                                    <div class="wysiwyg-editor" id="editor-2" style="height: 150px;"></div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="portlet">
                        <div class="portlet-heading dark">
                            <div class="portlet-title">
                                <h4>jQuery Knob</h4>
                            </div>
                            <div class="portlet-widgets">
                                <a data-toggle="collapse" data-parent="#accordion" href="#ft-7"><i class="fa fa-chevron-down"></i></a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div id="ft-7" class="panel-collapse collapse in">
                            <div class="portlet-body">
                                <div class="row">
                                    <div class="col-sm-4 col-xs-6 text-center">
                                        <input class="knob" data-width="90" data-height="90" data-thickness=".2" data-cursor="true" data-fgcolor="#ab7a4b" data-thickness=.3 value="29">
                                    </div>
                                    <div class="col-sm-4 col-xs-6 text-center">
                                        <input class="knob input-small" data-width="90" data-height="90" data-thickness=".2" data-min="-100" data-fgcolor="#466baf" data-displayprevious="true" value="44">
                                    </div>
                                    <div class="col-sm-4 text-center">
                                        <input class="knob input-small" data-width="90" data-height="90" data-thickness=".2" data-angleoffset=-125 data-anglearc=250 data-fgcolor="#72af46" data-rotation="anticlockwise" value="35">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="portlet">
                        <div class="portlet-heading dark">
                            <div class="portlet-title">
                                <h4>Fuelux Spinners</h4>
                            </div>
                            <div class="portlet-widgets">
                                <a data-toggle="collapse" data-parent="#accordion" href="#ft-8"><i class="fa fa-chevron-down"></i></a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div id="ft-8" class="panel-collapse collapse in">
                            <div class="portlet-body">
                                <form class="form-horizontal" role="form" method="post">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Spinner 1</label>
                                        <div class="col-sm-4">
                                            <div id="MySpinner-1" class="spinner">
                                                <div class="input-group input-small">
                                                    <input type="text" class="spinner-input form-control">
                                                    <div class="spinner-buttons input-group-btn btn-group-vertical">
                                                        <button type="button" class="btn spinner-up btn-xs">
                                                            <i class="fa fa-chevron-up icon-only"></i>
                                                        </button>
                                                        <button type="button" class="btn spinner-down btn-xs">
                                                            <i class="fa fa-chevron-down icon-only"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div id="MySpinner-2" class="spinner">
                                                <div class="input-group input-small">
                                                    <input type="text" class="spinner-input form-control">
                                                    <div class="spinner-buttons input-group-btn btn-group-vertical">
                                                        <button type="button" class="btn spinner-up btn-xs btn-gray">
                                                            <i class="fa fa-chevron-up icon-only"></i>
                                                        </button>
                                                        <button type="button" class="btn spinner-down btn-xs btn-gray">
                                                            <i class="fa fa-chevron-down icon-only"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="help-block">disabled state</span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Spinner 3</label>
                                        <div class="col-sm-4">
                                            <div id="MySpinner-3" class="spinner">
                                                <div class="input-group input-medium">
                                                    <input type="text" class="spinner-input form-control input-sm">
                                                    <div class="spinner-buttons input-group-btn">
                                                        <button type="button" class="btn spinner-up btn-sm">
                                                            <i class="fa fa-chevron-up icon-only"></i>
                                                        </button>
                                                        <button type="button" class="btn spinner-down btn-sm">
                                                            <i class="fa fa-chevron-down icon-only"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="help-block">with max value:10</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Spinner 4</label>
                                        <div class="col-sm-4">
                                            <div id="MySpinner-4" class="spinner">
                                                <div class="input-group input-medium">
                                                    <div class="spinner-buttons input-group-btn">
                                                        <button type="button" class="btn spinner-up">
                                                            <i class="fa fa-plus icon-only"></i>
                                                        </button>
                                                    </div>

                                                    <input type="text" class="spinner-input form-control">

                                                    <div class="spinner-buttons input-group-btn">
                                                        <button type="button" class="btn spinner-down">
                                                            <i class="fa fa-minus icon-only"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="help-block">with step:5</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="portlet">
                        <div class="portlet-heading dark">
                            <div class="portlet-title">
                                <h4>Touch Spinners</h4>
                            </div>
                            <div class="portlet-widgets">
                                <a data-toggle="collapse" data-parent="#accordion" href="#ft-9"><i class="fa fa-chevron-down"></i></a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div id="ft-9" class="panel-collapse collapse in">
                            <div class="portlet-body">
                                <form class="form-horizontal" role="form" method="post">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Spinner 1</label>
                                        <div class="col-sm-5">
                                            <input id="touchspin-demo1" type="text" value="55" name="demo1">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Spinner 2</label>
                                        <div class="col-sm-5">
                                            <input id="touchspin-demo2" type="text" value="55" name="demo2">
                                            <span class="help-block">example with decimal steps</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="portlet">
                        <div class="portlet-heading dark">
                            <div class="portlet-title">
                                <h4>Bootstrap Tags Input</h4>
                            </div>
                            <div class="portlet-widgets">
                                <a data-toggle="collapse" data-parent="#accordion" href="#ft-10"><i class="fa fa-chevron-down"></i></a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div id="ft-10" class="panel-collapse collapse in">
                            <div class="portlet-body">
                                <form class="form-horizontal" role="form" method="post">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Tags</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" value="Amsterdam,Washington,Sydney" data-role="tagsinput" />
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="portlet">
                        <div class="portlet-heading dark">
                            <div class="portlet-title">
                                <h4>Color Pickers</h4>
                            </div>
                            <div class="portlet-widgets">
                                <a data-toggle="collapse" data-parent="#accordion" href="#ft-11"><i class="fa fa-chevron-down"></i></a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div id="ft-11" class="panel-collapse collapse in">
                            <div class="portlet-body">
                                <form class="form-horizontal" role="form" method="post">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Color Picker</label>
                                        <div class="col-sm-9">
                                            <div class="bootstrap-colorpicker">
                                                <input id="colorpicker1" type="text" class="input-small" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Custom Color Picker</label>
                                        <div class="col-sm-9">
                                            <div class="space-4"></div>
                                            <select id="ek-colorpicker">
                                                <option value="#d15050" selected>#d15050;</option>
                                                <option value="#86618f">#86618f</option>
                                                <option value="#ba5d32">#ba5d32</option>
                                                <option value="#488075">#488075</option>
                                                <option value="#4e72c2">#4e72c2</option>
                                            </select>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END YOUR CONTENT HERE -->

        </div>
    </div>

    <!-- BEGIN FOOTER CONTENT -->
    <div class="footer">
        <div class="footer-inner">
            <!-- basics/footer -->
            <div class="footer-content">
                &copy; 2014 <a href="#">eKoders</a>, All Rights Reserved.
            </div>
            <!-- /basics/footer -->
        </div>
    </div>
    <button type="button" id="back-to-top" class="btn btn-primary btn-sm back-to-top">
        <i class="fa fa-angle-double-up icon-only bigger-110"></i>
    </button>
    <!-- END FOOTER CONTENT -->

</div><!-- /#page-wrapper -->
@section Scripts {
    <script>
        $(document).ready(function () {
            //Dual listbox examples  for more information and options please visit http://www.virtuosoft.eu/code/bootstrap-duallistbox/
            var demo1 = $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox({ infoTextFiltered: '<span class="label label-primary label-lg">Filtered</span>' });
            var container1 = demo1.bootstrapDualListbox('getContainer');

            //Select2 examples
            $("#e1, #e2, #e3").select2({
                width: 175
            });
            $("#e4").select2({
                placeholder: "Select a Option",
                width: 375,
                allowClear: true
            });
            $("#e5").select2({ tags: ["red", "green", "blue"] });

            //Bootstrap Select enable
            $('.selectpicker').selectpicker('show');

            //Maxilength
            $('input[maxlength]').maxlength();

            $('input.maxL-1').maxlength({
                threshold: 17
            });

            $('input.maxL-2').maxlength({
                alwaysShow: true,
                warningClass: "label label-primary",
                limitReachedClass: "label label-danger",
                separator: ' of ',
                preText: 'You have ',
                postText: ' chars remaining.',
                validate: true,
                threshold: 10
            });

            $('textarea#maxL-3').maxlength({
                alwaysShow: true
            });

            $('input#maxL-4').maxlength({
                alwaysShow: true,
                placement: 'top-left'
            });

            //Masked Input Uses http://digitalbush.com/projects/masked-input-plugin/
            $.mask.definitions['~'] = '[+-]';
            $('.input-date').mask('99/99/9999');
            $('.input-phone').mask('(999) 999-9999');
            $(".input-key").mask("a*-999-a999", { placeholder: " ", completed: function () { alert("You typed the following: " + this.val()); } });
            $('.input-eyescript').mask('~9.99 ~9.99 999');

            //Bootstrap Datetimepicker
            $('.form_datetime').datetimepicker({
                //language:  'fr',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1
            });
            $('.form_date').datetimepicker({
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });
            $('.form_time').datetimepicker({
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 1,
                minView: 0,
                maxView: 1,
                forceParse: 0
            });

            //Bootstrap Datepicker
            $('.datepicker').datepicker();

            //Wysihtml Editor
            $('#editor1').wysihtml5();

            //Bootstrap Wysiwyg Editor
            $('#editor-2').ek_wysiwyg({
                toolbar:
                    [
                        'font',
                        null,
                        'fontSize',
                        null,
                        'bold',
                        'italic',
                        'strikethrough',
                        'underline',
                        null,
                        'justifyleft',
                        'justifycenter',
                        'justifyright',
                        null,
                        'createLink',
                        'unlink',
                        null,
                        'insertImage',
                        null,
                        'undo',
                        'redo'
                    ]
            }).prev().addClass('editor-style1 text-center');


            // Spinners
            $('#MySpinner-1').spinner();
            $('#MySpinner-2').spinner({ disabled: true });
            $('#MySpinner-3').spinner({ value: 0, min: 0, max: 10 });
            $('#MySpinner-4').spinner({ value: 0, step: 5, min: 0, max: 200 });

            // Touchspinners
            $("#touchspin-demo1").TouchSpin({
                min: 0,
                max: 100,
                step: 1,
                decimals: 0,
                boostat: 5,
                maxboostedstep: 10,
                postfix: '$'
            });

            $("#touchspin-demo2").TouchSpin({
                min: 0,
                max: 100,
                step: 0.1,
                decimals: 2,
                boostat: 5,
                maxboostedstep: 10,
                buttonup_class: 'btn btn-primary',
                buttondown_class: 'btn btn-primary',
                postfix: '%'
            });

            //jQuery knob for more option/help please visit https://github.com/aterrien/jQuery-Knob
            $(function () {
                $(".knob").knob();
            });

            //Color Picker
            $('#colorpicker1').colorpicker();

            //Custom Color Picker
            $('#ek-colorpicker').ek_colorpicker();
        });
    </script>
}
